<template>
  <div id="box" class="bg">

    <header>
      <div class="title">金华市工伤智控<span style="font-size: 2rem">(基金)</span></div>
      <div class="datetime">
        <div class="time">15:25:25</div>
        <div class="date">
          <div class="week">星期四</div>
          <div>2022.01.27</div>
        </div>
      </div>
    </header>

    <main>
      <!--  页面右侧   -->
      <div class="right">
        <!--  表：浙里办应用使用量  -->
        <div class="right_data1">
          <div class="table_title height_right3">浙里办应用使用量</div>
          <div ref="table_left3" class="table_left3"/>
        </div>
        <!--  表：多跨协同  -->
        <div class="right_data2">
          <div class="table_title height_right1">多跨协同</div>
          <div class="right_data2_box1">
            <div class="right_data2_item" v-for="(item,index) in data_right[0]" :key="index">
              <div class="right_data2_img1" :style="{background: 'url(' + item.img + ')'}"/>
              <div class="right_data2_img2">{{ item.text }}</div>
              <div class="text_white"><span class="right_data2_text">{{ item.num }}</span>条</div>
            </div>
          </div>
          <div class="right_data2_box1">
            <div class="right_data2_item" v-for="(item,index) in data_right[1]" :key="index">
              <div class="right_data2_img1" :style="{background: 'url(' + item.img + ')'}"/>
              <div class="right_data2_img2">{{ item.text }}</div>
              <div class="text_white"><span class="right_data2_text">{{ item.num }}</span>条</div>
            </div>
          </div>
        </div>
        <div class="right_data3">
          <div class="table_title height_right2">数据共享</div>
<!--          <div id="container" style="height: 100%"></div>-->
        </div>
      </div>
      <!--  页面左侧   -->
      <div class="left">
        <!--  表：工伤收支情况(近5年)  -->
        <div class="insured">
          <div class="table_title height_left1">工伤收支情况(近5年)</div>
          <div id="table_left1" style="width: 100%;height: 80%"/>
        </div>
        <!--  表：工伤基金收支差额(近6个月)  -->
        <div class="box_left2">
          <div class="table_title height_left2">工伤基金收支差额(近6个月)</div>
          <div id="table_left2" style="width: 110%;height: 70%;"/>
        </div>
        <!--  表：事故案件排行  -->
        <div class="data3_table">
          <div class="table_title height_left3">各行业工伤基金收支TOP10</div>
          <div id="container" style="height: 100%" ref="chartPie"></div>
        </div>
      </div>
      <!--  页面中部    -->
      <div class="middle">
        <!--  页面中部--顶部数据栏     -->
        <div class="data_mid_1">
          <!--  页面中部--顶部数据栏--单个显示块        -->
          <div class="data1" v-for="(item, index) in data_mid" :key="index">
            <div class="data1_img" :style="{background: 'url(' + item.img + ')'}"></div>
            <div class="data1_right">
              <div class="data1_text1">{{ item.text }}</div>
              <!--              <dv-digital-flop :config="config" class="data1_text2"/>-->
              <div class="data1_text2">100</div>
              <div class="data1_text5">{{ item.unit }}</div>
            </div>
          </div>
        </div>
        <!--  地图  -->
        <div id="charsMap" class="map"/>
        <!--   页面中部--底部数据栏     -->
        <div class="data_mid_2">
          <!--    页面中部--底部数据栏--标题      -->
          <div class="data2_title"> 工伤联网结算</div>
          <!--    页面中部--底部数据栏--轮播表      -->
          <dv-scroll-board :config="config_data3" class="data_table"/>
        </div>
      </div>
    </main>

    <footer>
      <div class="btn_bottom_box">
        <div class="btn_bottom" v-for="(item, index) in data_bottom" :key="index">
          <div class="btn_bottom_img" :style="{background: 'url(' + item.img + ')'}"/>
          <div class="btn_bottom_text">{{ item.text }}</div>
        </div>
      </div>
    </footer>

  </div>
</template>

<script>
import axios from "axios"

const echarts = require('echarts')
const echartsGl = require('echarts-gl')
const Highcharts = require('highcharts')

export default {
  name: "index",
  data() {
    return {
      config: {
        number: [100],
        content: '{nt}',
        style: {
          fontSize: 28,
          fill: '#FDD532',
        },
      },
      config_data2: {
        header: ['地区', '案件数', '事故率'],
        data: [
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1']
        ],
        index: true,
        indexHeader: '排行',
        columnWidth: [55],
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#041A33',
        evenRowBGC: '#041F3A'
      },
      config_data3: {
        header: ['姓名 ', '身份证', '统筹区', '医院', '时间', '金额'],
        data: [
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1']
        ],
        index: true,
        indexHeader: '序号',
        columnWidth: [65],
        rowNum: 4,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      data_mid: [
        {
          unit: '个',
          text: '参保人数',
          img: require('../assets/data_mid_1_1.png')
        },
        {
          unit: '个',
          text: '案件数',
          img: require('../assets/data_mid_1_2.png')
        },
        {
          unit: '%',
          text: '事故率',
          img: require('../assets/data_mid_1_3.png')
        }
      ],
      data_left: [
        {
          text: '基金收入',
          img: require('../assets/data_left_1.png')
        },
        {
          text: '基金支出',
          img: require('../assets/data_left_2.png')
        }
      ],
      data_right: [
        [{
          text: '应急局',
          num: '11',
          img: require('../assets/data_right_1.png')
        },
          {
            text: '交通局',
            num: '22',
            img: require('../assets/data_right_2.png')
          },
          {
            text: 'XX局',
            num: '31',
            img: require('../assets/data_right_3.png')
          }],
        [{
          text: 'XX局',
          num: '34',
          img: require('../assets/data_right_4.png')
        },
          {
            text: 'XX局',
            num: '31',
            img: require('../assets/data_right_5.png')
          },
          {
            text: 'XX局',
            num: '16',
            img: require('../assets/data_right_6.png')
          }],
      ],
      data_bottom: [
        {
          text: '主屏',
          img: require('../assets/btn_img1.png')
        },
        {
          text: '全域预防',
          img: require('../assets/btn_img2.png')
        },
        {
          text: '精准智控',
          img: require('../assets/btn_img3.png')
        },
        {
          text: '安心工伤',
          img: require('../assets/btn_img4.png')
        }
      ],
    }
  },
  mounted() {
    this.echartsTableInit()
    this.echartsTableInit2()
    // this.echartsTableInit3()
    // this.highchartsInit()
    //this.echartsMap()
    this.echartsPie([
      {name: '建筑业', value:  '123'},
      {name: '保险业', value:  211},
      {name: '房地产', value:  321},
      {name: '计算机', value:  434},
      {name: '服装业', value:  231},
      {name: '公益组织', value:  89},
      {name: '广告业', value:  13},
      {name: '航空航天', value:  421},
      {name: '金融', value:  211},
      {name: '因特网', value:  123},
    ])
    this.echartsPie2([
      {name: '伤残补助金', value:  234},
      {name: '医疗费用', value:  345},
      {name: '护理费', value:  211},
      {name: '其他费用1', value:  123},
      {name: '其他费用2', value:  321},
    ])
  },
  methods: {
    highchartsInit() {
      const chart = Highcharts.chart('container', {
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        title: {
          text: ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
              enabled: true,
              format: '{point.name}'
            }
          }
        },
        series: [{
          type: 'pie',
          name: '',
          data: [
            ['数据1', 45.0],
            ['数据2', 26.8],
            {
              name: '数据6',
              y: 12.8,
              sliced: true,
              selected: true
            },
            ['数据3', 8.5],
            ['数据4', 6.2],
            ['数据5', 0.7]
          ]
        }]
      });
    },
    echartsTableInit() {
      const myChart = echarts.init(document.getElementById("table_left1"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '25%',
          right: '0%',
          bottom: '20%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '7%',
          right: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出', '基金结余'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "万元",
            min: 0,
            max: 60,
            interval: 20,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 9,
            data: [35, 30, 42, 48, 32],
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#3E9DF3'
              }
            },
          },
          {
            name: '基金支出',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [29, 23, 35, 39, 26],
            barWidth: 9,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#E5772D'
              }
            },
          },
          {
            name: '基金结余',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#46D3CB'
              }
            },
            data: [20, 12, 15, 25, 17]
          }
        ]
      }
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      option && myChart.setOption(option);
    },
    echartsTableInit2() {
      const myChart = echarts.init(document.getElementById("table_left2"))
      const option = {
        grid: {
          top: '30%',
          right: '10%',
          bottom: '10%',
          left: '7%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '7%',
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: ['7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万元',
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: [26, 35, 34, 45, 37, 38]
          },
          {
            name: '基金支出',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EA772B'
              }
            },
            data: [18, 22, 17, 33, 22, 24]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    echartsTableInit3() {
      const myChart = echarts.init(document.getElementById("table_left3"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['单位', '个人'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'],
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "次",
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '单位',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 7,
            data: [31, 26, 27, 41, 32, 28, 25, 29],
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#08244C" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#2A76F2" // 100% 处的颜色
                }], false),
              }
            },
          },
          {
            name: '个人',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [26, 23, 29, 39, 30, 27, 23, 26],
            barWidth: 7,
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#54FFFF'
                }, {
                  offset: 1,
                  color: '#06152A'
                }]),
              }
            },
          }
        ]
      }
      option && myChart.setOption(option);
    },
    echartsMap() {
      const chartDom = document.getElementById('charsMap');
      const myChart = echarts.init(chartDom);

      myChart.showLoading();
      axios.get('../static/jinhua.json').then(res => {
        console.log(res.data)
        echarts.registerMap('金华市', res.data)
        myChart.hideLoading()
        const option = {
          geo3D: {
            map: '金华市',
            itemStyle: {
              areaColor: '#B92722',
              opacity: 0.2,
              borderWidth: 0.8,
              borderColor: '#fff'
            },
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16,
                opacity: 1,
                backgroundColor: 'rgba(0,0,0,0)'
              }
            },
            emphasis: {
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                }
              }
            },
            light: { // 光照阴影
              main: {
                color: '#16866E', // 光照颜色
                intensity: 1, // 光照强度
                shadow: false, // 阴影
                shadowQuality: 'high', // 阴影亮度
                alpha: 50,
                beta: 10,
              },
              ambient: {
                intensity: 0.3
              }
            },
            instancing: false,
            width: "100%",
            height: "100%",
            boxWidth: 128,
            boxHeight: 2,
            top: 26,
            left: 20,
            viewControl: { 	// 用于鼠标的旋转，缩放等视角控制。
              rotateSensitivity: 0, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
              projection: 'orthographic', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
              orthographicSize: 110, //控制地图大小
              maxOrthographicSize: 110, //投影的最大值
              minOrthographicSize: 110, //投影的最小值
              autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
              autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
              autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
              autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
              damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
              zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
              panSensitivity: 0, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
              panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              alpha: 56, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
              beta: 6, 	// 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
              animation: true, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 10,	// 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
              // autoRotateSpeed:5
            },
            data: [{ // 可对单个地图区域进行设置
              name: '婺城区', // 所对应的地图区域的名称
              //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
              itemStyle: { // 单个区域的样式设置
                color: '#00FF00',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#5F9EA0'
              },
            }, {
              name: '武义县',
              itemStyle: {
                color: '#EEEE00',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#5F9EA0'
              },
            }]
          },
          tooltip: { // 提示框
            trigger: 'item',
            formatter: function (params) {
              return params.name;
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: '10%',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              type: 'bar3D',
              name: 'map3D', // 系列名称
              coordinateSystem: 'geo3D',
              bevelSmoothness: 50,
              regionHeight: 10,
              shading: 'lambert',
              barSize: 1,
              minHeight: 1,
              maxHeight: 20,
              silent: true,
              itemStyle: {
                color: 'orange'
              },
              data: [
                {name: '婺城区', value: [119.509748, 28.977012, 10000], itemStyle: {color: "#fef436"}},
                {name: '金东区', value: [119.681264, 29.095835, 10], itemStyle: {color: "#fc0d1b"}},
                {name: '武义县', value: [119.714529, 28.768287, 7770], itemStyle: {color: "#188dfb"}},
              ],
            }
          ]
        }

        // const option = {
        //   // 提示配置
        //   tooltip: {
        //     trigger: 'item',
        //     formatter: (params) => {
        //       return params.name;
        //     }
        //   },
        //   visualMap: {
        //     show: false
        //   },
        //   // 系列配置，数值、映射成的图、如何映射成图的参数、图表类型等配置
        //   series: [{
        //     type: 'map3D', // 系列类型
        //     name: 'map3D', // 系列名称
        //     map: '金华市', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
        //     regionHeight: 10, // 区域厚度
        //     label: { // 标签的相关设置
        //       show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
        //       //distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
        //       //formatter:, // 标签内容格式器
        //       textStyle: { // 标签的字体样式
        //         color: '#fff', // 地图初始化区域字体颜色
        //         fontSize: 16, // 字体大小
        //         fontWeight: 600, // 字体粗细
        //         opacity: 1, // 字体透明度
        //         backgroundColor: 'rgba(0,0,0,0)' // 字体背景色
        //       },
        //     },
        //
        //     itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
        //       color: '#fff', // 地图板块的颜色
        //       opacity: 1, // 图形的不透明度 [ default: 1 ]
        //       borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
        //       borderColor: '#fff' // 图形描边的颜色。[ default: #333 ]
        //     },
        //
        //     emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
        //       label: { // label高亮时的配置
        //         show: true,
        //         textStyle: {
        //           color: '#fff', // 高亮时标签颜色变为 白色
        //           fontSize: 15, // 高亮时标签字体 变大
        //
        //         }
        //       },
        //       itemStyle: { // itemStyle高亮时的配置
        //         areaColor: '#66ffff', // 高亮时地图板块颜色改变
        //       }
        //     },
        //
        //     groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
        //       show: false, // 是否显示地面。[ default: false ]
        //       color: '#aaa' // 地面颜色。[ default: '#aaa' ]
        //     },
        //
        //     shading: 'realistic', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
        //     // 'color' 只显示颜色，不受光照等其它因素的影响。
        //     // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
        //     // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
        //     //realisticMaterial: {}, // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
        //     // lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
        //     // colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
        //
        //     light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
        //       main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
        //         color: '#fff', //主光源的颜色。[ default: #fff ]
        //         intensity: 0.6, //主光源的强度。[ default: 1 ]
        //         shadow: false, //主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
        //         shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
        //         alpha: 45, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
        //         beta: 10,// 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
        //       },
        //       ambient: { // 全局的环境光设置。
        //         color: '#fff', // 环境光的颜色。[ default: #fff ]
        //         intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
        //       }
        //     },
        //     width: "100%",
        //     height: "100%",
        //     boxWidth: 175,
        //     boxHeight: 2,
        //     top: 40,
        //     left: 25,
        //     viewControl: { // 用于鼠标的旋转，缩放等视角控制。
        //       projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
        //       autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
        //       autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
        //       autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
        //       autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
        //       damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
        //       rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
        //       zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
        //       panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
        //       panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
        //       rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
        //
        //       distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
        //       minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
        //       maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
        //
        //       alpha: 90, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
        //       beta: 20, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
        //       minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        //       maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        //       minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        //       maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        //       center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
        //       animation: true, // 是否开启动画。[ default: true ]
        //       animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        //       animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
        //     },
        //
        //     data: [{ // 可对单个地图区域进行设置
        //       name: '婺城区', // 所对应的地图区域的名称
        //       value: 12,
        //       //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //       itemStyle: { // 单个区域的样式设置
        //         // color: '#1CD66C',
        //         // opacity: 1,
        //         // borderWidth: 0.8,
        //         // borderColor: '#fff',
        //         normal: {
        //           color: {
        //             image: document.getElementById("img1"),
        //             repeat: 'repeat'
        //           }
        //         }
        //
        //       }
        //     },
        //       { // 可对单个地图区域进行设置
        //         name: '武义县', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#F8D132',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '永康市', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#F3597F',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '磐安县', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#FE8541',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '兰溪市', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#1CD66C',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '金东区', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#1CD66C',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '义乌市', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#1CD66C',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '浦江县', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#1CD66C',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //       { // 可对单个地图区域进行设置
        //         name: '东阳市', // 所对应的地图区域的名称
        //         //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
        //         itemStyle: { // 单个区域的样式设置
        //           color: '#1CD66C',
        //           opacity: 1,
        //           borderWidth: 0.8,
        //           borderColor: '#fff'
        //         }
        //       },
        //     ]
        //
        //   }]
        // };

        //   const option = {
        //     title: {
        //       text: '',
        //       subtext: '',
        //     },
        //     geo: {
        //       type: 'map',
        //       map: '金华市',
        //       label: {
        //         show: true
        //       },
        //       itemStyle: {
        //         borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
        //         borderColor: '#fff', // 图形描边的颜色。[ default: #333 ]
        //       },
        //       selectedMode: 'single', //是否支持多个选中，single单选，multiple多选
        //       aspectScale: 0.8,  //地图长度比
        //       roam: false,
        //       zoom: 1,
        //       regions: [{
        //         name: '婺城区',
        //         itemStyle: {
        //           normal: {
        //             areaColor: { //地图色
        //               type: 'radial',
        //               x: 0.5,
        //               y: 0.5,
        //               r: 0.5,
        //               colorStops: [{
        //                 offset: 0, color: '#16846D' // 0% 处的颜色
        //               }, {
        //                 offset: 1, color: '#0E3870' // 100% 处的颜色
        //               }],
        //               globalCoord: false // 缺省为 false
        //             },
        //           },
        //         }
        //       }]
        //     },
        //     tooltip: {
        //       trigger: 'item',
        //       formatter: '{b}<br/>{c} (p / km2)'
        //     },
        //     // series: [
        //     //   {
        //     //     name: '香港18区人口密度',
        //     //     type: 'map',
        //     //     map: '金华市',
        //     //     label: {
        //     //       show: true
        //     //     },
        //     //   }
        //     // ]
        //   }
        myChart.setOption(option);
      })
      // 处理点击事件并且跳转到相应的百度搜索页面
      // myChart.on('click', function (params) {
      //   let subSystem = params.name;
      //   let url = 'https://www.baidu.com/s?ie=UTF-8&wd=';
      //   // 根据点击地图区域的名称,跳转到对应页面
      //   if (subSystem == '婺城区') {
      //     window.open(url.concat(subSystem));
      //   } else if (subSystem == '武义县') {
      //     window.open(url.concat(subSystem));
      //   }
      //   alert(params.name);
      // });
    },
    data_mid_1() {
      let temp = {...this.config}
      temp.number[0] += 100
      this.config = {...temp}
    },
    echartsPie(data) {
      let sum = eval(data.map(item => item.value).join('+'))

      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20
          },

          x: function(u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function(u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function(u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u);
            }
            return Math.sin(v) > 0 ? 1 : -1;
          }
        };
      }

      // 生成模拟 3D 饼图的配置项
      function getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
          typeof internalDiameterRatio !== "undefined" ?
            (1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
            1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += +pieData[i].value;

          let seriesItem = {
            name: typeof pieData[i].name === "undefined" ?
              `series${i}` : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k
            }
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined" ?
              (itemStyle.color = pieData[i].itemStyle.color) :
              null;
            typeof pieData[i].itemStyle.opacity != "undefined" ?
              (itemStyle.opacity = pieData[i].itemStyle.opacity) :
              null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + +series[i].pieData.value;

          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k
          );

          startValue = endValue;

          legendData.push(series[i].name);
        }

        // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
        series.push({
          name: "mouseoutSeries",
          type: "surface",
          parametric: true,
          wireframe: {
            show: false
          },
          itemStyle: {
            opacity: 0,
            color: "rgba(18,236,252,.5)"
          },
          parametricEquation: {
            u: {
              min: 0,
              max: Math.PI * 2,
              step: Math.PI / 20
            },
            v: {
              min: 0,
              max: Math.PI,
              step: Math.PI / 1.4
            },
            x: function(u, v) {
              return Math.sin(v) * Math.sin(u) + Math.sin(u);
            },
            y: function(u, v) {
              return Math.sin(v) * Math.cos(u) + Math.cos(u);
            },
            z: function(u, v) {
              return Math.cos(v) > 0 ? 0.1 : -0.1;
            }
          }
        });

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          color: ['#D14362', '#EBB344', '#46CEC4', '#2F43FB', '#1973FA', '#4E96FD', '#055479', '#0B72A5', '#2FADEA', '#10ABFB'],
          //animation: false,
          legend: {
            show: true,
            data: legendData,
            textStyle: {
              color: '#fff',
              padding: [0, 0, 0, 5],
              fontSize: 12,
              rich: {
                fontSize: 12,
                text: {
                  width: 60,
                  color: '#b8c2d3'
                },
                num: {
                  fontSize: 14,
                  fontWeight: 'bold'
                }
              },
            },
            top: '0',
            left: '62%',
            orient: 'vertical',
            itemHeight: 4,
            itemWidth: 16,
            itemGap: 8,
            formatter: name => {
              let index = legendData.indexOf(name)
              let td = pieData[index]
              return `{text|${td.name}} {num|${(td.value / sum * 100).toFixed(2)}}%`
            }
          },
          tooltip: {
            extraCssText: 'text-align: left; padding: 2px 10px; border: 2px solid #235385',
            formatter: params => {
              if (params.seriesName !== 'mouseoutSeries') {
                return `${params.seriesName}<br/>
                        <span style= "display:inline-block;margin-right:5px;margin-left: 0px;width:10px;height:10px;background-color:${params.color}; "></span>
                        ${option.series[params.seriesIndex].pieData.value} 万元`;
              }
            }
          },
          xAxis3D: {
            min: -1.3,
            max: 1.3
          },
          yAxis3D: {
            min: -1.3,
            max: 1.3
          },
          zAxis3D: {
            min: -1.3,
            max: 1.3
          },
          grid3D: {
            show: false,
            boxHeight: 5,
            top: '-10%',
            left: '-20%',
            bottom: "50%",
            viewControl: {
              //3d效果可以放大、旋转等，请自己去查看官方配置
              alpha: 40,
              beta: 5,
              distance: 150,
              rotateSensitivity: 0,
              zoomSensitivity: 0,
              panSensitivity: 0,
              autoRotate: true,
              //   autoRotateSpeed: 5,
              //   autoRotateAfterStill: 10
            },
          },
          series: series
        };
        return option;
      }

      // 传入数据生成 option
      let option = getPie3D(data, .78);
      let myChart = echarts.init(this.$refs.chartPie)
      myChart.setOption(option)
    },
    echartsPie2(data) {
      let sum = eval(data.map(item => item.value).join('+'))

      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20
          },

          x: function(u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function(u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function(u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u);
            }
            return Math.sin(v) > 0 ? 1 : -1;
          }
        };
      }

      // 生成模拟 3D 饼图的配置项
      function getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
          typeof internalDiameterRatio !== "undefined" ?
            (1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
            1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += +pieData[i].value;

          let seriesItem = {
            name: typeof pieData[i].name === "undefined" ?
              `series${i}` : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k
            }
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined" ?
              (itemStyle.color = pieData[i].itemStyle.color) :
              null;
            typeof pieData[i].itemStyle.opacity != "undefined" ?
              (itemStyle.opacity = pieData[i].itemStyle.opacity) :
              null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + +series[i].pieData.value;

          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k
          );

          startValue = endValue;

          legendData.push(series[i].name);
        }

        // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
        series.push({
          name: "mouseoutSeries",
          type: "surface",
          parametric: true,
          wireframe: {
            show: false
          },
          itemStyle: {
            opacity: 0,
            color: "rgba(18,236,252,.5)"
          },
          parametricEquation: {
            u: {
              min: 0,
              max: Math.PI * 2,
              step: Math.PI / 20
            },
            v: {
              min: 0,
              max: Math.PI,
              step: Math.PI / 1.4
            },
            x: function(u, v) {
              return Math.sin(v) * Math.sin(u) + Math.sin(u);
            },
            y: function(u, v) {
              return Math.sin(v) * Math.cos(u) + Math.cos(u);
            },
            z: function(u, v) {
              return Math.cos(v) > 0 ? 0.1 : -0.1;
            }
          }
        });

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          color: ['#D14362', '#EBB344', '#46CEC4', '#2F43FB', '#1973FA', '#4E96FD', '#055479', '#0B72A5', '#2FADEA', '#10ABFB'],
          //animation: false,
          legend: {
            show: true,
            data: legendData,
            textStyle: {
              padding: [0, 0, 0, 5],
              fontSize: 12,
              color: '#b8c2d3',
              rich: {
                fontSize: 12,
                color: '#b8c2d3',
                text: {
                  width: 70,
                  color: '#b8c2d3'
                },
                num: {
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff',
                }
              },
            },
            top: 'center',
            left: '52%',
            orient: 'vertical',
            itemHeight: 4,
            itemWidth: 16,
            itemGap: 8,
            formatter: name => {
              let index = legendData.indexOf(name)
              let td = pieData[index]
              return `{text|${td.name}} {num|${td.value}}万元({num|${(td.value / sum * 100).toFixed(2)}}%)`
            }
          },
          tooltip: {
            extraCssText: 'text-align: left; padding: 2px 10px; border: 2px solid #235385',
            formatter: params => {
              if (params.seriesName !== 'mouseoutSeries') {
                return `${params.seriesName}<br/>
                        <span style= "display:inline-block;margin-right:5px;margin-left: 0px;width:10px;height:10px;background-color:${params.color}; "></span>
                        ${option.series[params.seriesIndex].pieData.value} 万元`;
              }
            }
          },
          xAxis3D: {
            min: -1.3,
            max: 1.3
          },
          yAxis3D: {
            min: -1.3,
            max: 1.3
          },
          zAxis3D: {
            min: -1.3,
            max: 1.3
          },
          grid3D: {
            show: false,
            boxHeight: 12,
            top: '0%',
            left: '-25%',
            bottom: "40%",
            viewControl: {
              //3d效果可以放大、旋转等，请自己去查看官方配置
              alpha: 20,
              beta: 5,
              distance: 200,
              rotateSensitivity: 0,
              zoomSensitivity: 0,
              panSensitivity: 0,
              autoRotate: true,
              //   autoRotateSpeed: 5,
              //   autoRotateAfterStill: 10
            },
          },
          series: series
        };
        return option;
      }

      // 传入数据生成 option
      let option = getPie3D(data, 0);
      let myChart = echarts.init(this.$refs.table_left3)
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

body {
  width: 100%;
  height: 100%;
}

.bg {
  background: url("../assets/bg.png") no-repeat;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  position: fixed;
  margin-top: -60px;
  margin-left: -8px;
}

.map {
  height: 66%;
  width: 100%;
  margin: 0 auto;
  background: url("../assets/map_bg.png") no-repeat center;
  overflow: hidden;
  background-size: contain;
}

.title {
  display: inline-block;
  float: left;
  margin-top: .5rem;
  margin-left: 38%;
  color: #D9EBFA;
  font-size: 2.6rem;
  font-weight: 600;
}

.datetime {
  display: inline-block;
  float: right;
  width: 13%;
  height: 4%;
  margin-right: 8%;
  margin-top: 1.2rem;
  color: #D9EBFA;
}

.time {
  display: inline-block;
  float: left;
  margin-top: 4%;
  font-size: 1.6rem;
}

.date {
  display: inline-block;
  float: right;
  font-size: .9rem;
}

.week {
  float: right;
}

.data_mid_1 {
  width: 74%;
  height: 9%;
  margin: 0 auto;
}

.data1 {
  float: left;
  height: 100%;
  width: 31%;
  margin: 0 1%;
}

.data1_right {
  float: left;
  color: #fff;
  width: 58%;
  height: 88%;
  padding-top: 5%;
}

.data1_img {
  float: left;
  height: 100%;
  height: 100%;
  width: 40%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-left: 2%;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 10px;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 55%;
  height: 70%;
  margin-left: 10%;
  font-family: LCD2;
  font-size: 1.6rem;
}

.data1_text4 {
  display: inline-block;
  float: left;
  width: 13%;
  height: 70%;
  margin-left: 2%;
  margin-top: 2.5%;
}

.data1_text3 {
  display: inline-block;
  float: left;
  font-size: .8rem;
  margin-top: 5.8%;
  color: #FBD533;
}

.data1_text5 {
  display: inline-block;
  float: left;
  font-size: .8rem;
  margin-top: 15%;
  margin-left: 5%;
  color: #FBD533;
}

.data_mid_2 {
  width: 100%;
  height: 25%;
}

.data2_title {
  background: url("../assets/subtitle_long.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 100%;
  line-height: 180%;
  margin-bottom: 1%;
  margin-top: .5%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #DCF3FF;
}

.data2_table {
  margin-left: 6%;
  width: 94%;
  height: 61%;
}

.data_table {
  margin-left: 3.5%;
  width: 96.5%;
  height: 70%;
}

.data3_table_top {
  width: 100%;
  height: 24%;
}

.data3_table_top_img {
  background: url("../assets/data_left_3.png");
  overflow: hidden;
  background-size: cover;
  height: 100%;
  width: 22%;
  margin-left: 4%;
  float: left;
}

.data3_table_top_text {
  float: left;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 4%;
}

.btn_bottom_box {
  height: 60%;
  width: 40%;
  margin: 1.5% auto;
}

.btn_bottom {
  float: left;
  height: 100%;
  width: 23%;
  margin-right: 2%;
}

.btn_bottom :hover {
  color: #F9D494;
}

.btn_bottom_img {
  float: left;
  height: 90%;
  width: 27%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-right: 4%;
}

.btn_bottom_text {
  display: inline-block;
  float: left;
  width: 55%;
  margin: 12% 0;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  font-style: italic;
  text-align: left;
}

.middle {
  height: 100%;
  width: 45%;
  margin: 0 auto;
}

.left {
  float: left;
  height: 100%;
  width: 26%;
}

.table_left3 {
  width: 100%;
  height: 80%;
  margin-top: 1%;
}

.right_data1 {
  height: 33%;
  width: 100%;
}

.right_data2 {
  height: 32%;
  width: 100%;
}

.right_data2_box1 {
  height: 21%;
  width: 94%;
  margin-top: 7%;
  margin-left: 6%;
}

.right_data2_item {
  float: left;
  height: 100%;
  width: 30%;
  margin-right: 3%;
}

.right_data2_img1 {
  float: left;
  height: 85%;
  width: 35%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.right_data2_img2 {
  float: left;
  margin-top: 1%;
  margin-left: 3%;
  background: url("../assets/subtitle_shortest.png");
  background-size: cover;
  overflow: hidden;
  height: 42%;
  width: 55%;
  color: white;
  font-size: .8rem;
}

.text_white {
  color: white;
  height: 45%;
  width: 45%;
  float: left;
  margin-left: 5%;
  text-align: left;
}

.right_data2_text {
  font-weight: 600;
  font-size: .9rem;
}

.right_data3 {
  height: 40%;
  width: 100%;
}

.insured {
  height: 35%;
  width: 100%;
}

.box_left2 {
  height: 35%;
  width: 100%;
}

.data3_table {
  width: 100%;
  height: 35%;
}

.table_title {
  background: url("../assets/subtitle_short.png");
  overflow: hidden;
  background-size: cover;
  text-align: left;
  padding-left: 10%;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}

.height_left1 {
  height: 18%;
  line-height: 170%;
}

.height_left2 {
  height: 14%;
  line-height: 170%;
}

.height_left3 {
  height: 15%;
  line-height: 170%;
}

.height_right1 {
  height: 18%;
  line-height: 200%;
}

.height_right2 {
  height: 14%;
  line-height: 200%;
}

.height_right3 {
  height: 15%;
  line-height: 180%;
}

.data_left {
  height: 20%;
  width: 94%;
  margin: 1% 6%;
}

.data_left_item {
  float: left;
  height: 100%;
  width: 35%;
  margin: 0 3%;
}

.data_left_img {
  float: left;
  height: 75%;
  width: 30%;
  margin-top: 5%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.data_left_text {
  display: inline-block;
  float: left;
  width: 65%;
  height: 100%;
}

.right {
  float: right;
  height: 100%;
  width: 26%;
}

main {
  margin: 6% auto;
  height: 81%;
  width: 96%;
}

footer {
  background: url("../assets/footer.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  height: 8.2%;
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>
